<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="资产编号" prop="assetNo">
        <el-input v-model="form.assetNo" placeholder="请输入资产编号" class="form_long"
        @blur="searchDevice" @keyup.enter.native="searchDevice"/>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="仪器名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入仪器名称" class="form_short"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原值" prop="originalValue">
            <el-input v-model="form.originalValue" placeholder="请输入原值" class="form_short"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="仪器型号" prop="model">
            <el-input v-model="form.model" placeholder="请输入仪器型号" class="form_short"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="仪器规格" prop="spec">
            <el-input v-model="form.spec" placeholder="请输入仪器规格" class="form_short"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="数量" prop="quantity">
            <el-input v-model="form.quantity" placeholder="请输入数量" type="number" class="form_short"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购买日期" prop="setUpAccount">
            <el-date-picker clearable size="small" style="width: 200px" v-model="form.setUpAccount" type="date"
              value-format="yyyy-MM-dd" placeholder="选择购买日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="制造商名称" prop="manufacturer">
            <el-input v-model="form.manufacturer" placeholder="请输入制造商名称" class="form_short"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="放置地点" prop="classRoomId">
            <el-input v-model="form.classRoomId" placeholder="请输入放置地点" class="form_short"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="项目经费" prop="fundItem">
            <el-input v-model="form.fundItem" placeholder="请输入项目经费" class="form_short"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预算" prop="budget">
            <el-input v-model="form.budget" placeholder="请输入预算" class="form_short"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="维修原因" prop="reason">
        <el-input v-model="form.reason" type="textarea" rows="3" placeholder="请输入内容" class="form_long"/>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import {getByNo} from "@/api/labbase/instrumentation"
  export default {
    name: "RepairedDevice",
    data() {
      return {
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          assetNo: [{
            required: true,
            message: "资产编号不能为空",
            trigger: "blur"
          }],
          name: [{
            required: true,
            message: "仪器名称不能为空",
            trigger: "blur"
          }],
          originalValue: [{
            required: true,
            message: "原值不能为空",
            trigger: "blur"
          }],
          model: [{
            required: true,
            message: "仪器型号不能为空",
            trigger: "blur"
          }],
          quantity: [{
            required: true,
            message: "数量不能为空",
            trigger: "blur"
          }],
          classRoomId: [{
            required: true,
            message: "放置地点不能为空",
            trigger: "blur"
          }],
          fundItem: [{
            required: true,
            message: "项目经费不能为空",
            trigger: "blur"
          }],
          budget: [{
            required: true,
            message: "预算不能为空",
            trigger: "blur"
          }],
        }
      };
    },
    props:{
      device:Object,
    },
    created() {
      if(this.device){
        this.form = this.device;
      }else{
        this.form  = {};
      }
    },
    methods: {
      getDevice(){
        return this.form;
      },
      searchDevice() {
        if (!this.form.assetNo) {
          this.form = {};
          return;
        } else
          getByNo(this.form.assetNo).then(response => {
            this.form = response.data;
            this.$forceUpdate();
          });
      },
    }
  };
</script>
<style type="text/css" scoped>
  .form_long {
    width: 525px;
  }

  .form_short {
    width: 200px;
  }

  .el-button.active {
    text-decoration: underline;
    color: #0000ee;
  }

  .hintItem {
    line-height: 30px;
  }

  .purchase_s_view {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
</style>
